<template>
  <div class="app">
    <van-nav-bar
      title="结算"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div v-if="orderinfo.table != null && orderinfo.table.length > 0">
      <div
        class="tableorder"
        v-for="(order, index) in orderinfo.table"
        :key="index"
      >
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">球桌订单</div>
        </div>
        <div class="tableorder_con">
          <div class="tableorder-box">
            <div class="imgbox">
              <img v-lazy="order.storecover_image[0]" alt="" />
            </div>
            <div class="infobox">
              <div style="font-size: 18px">{{ order.store_name }}</div>
              <div class="timeinfobox">
                <div style="font-size: 17px">
                  {{ order.level }}{{ order.t_number }}号球桌
                </div>
                <div class="time">时长：{{ order.playtime }}</div>
              </div>
              <div style="font-size: 16px; color: #6d6d6d">
                单价：￥{{ order.table_price }}/小时
              </div>
            </div>
          </div>
          <div class="heji">
            <div>合计：</div>
            <div style="color: #ff8259">￥{{ order.pay_money.toFixed(2) }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="orderinfo.zhujiao != null && orderinfo.zhujiao.length > 0">
      <div class="tableorder">
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">教练订单</div>
        </div>
        <div class="tableorder_con">
          <div class="tableorder-box">
            <div class="zhujiaoimgbox">
              <img src="../../assets/images/zhujiao1.png" alt="" />
            </div>
            <div class="infobox">
              <div style="font-size: 18px">昵称</div>
              <div class="timeinfobox">
                <div style="font-size: 17px">1号中级教练</div>
                <div class="time">时长：01:20:00</div>
              </div>
              <div style="font-size: 16px; color: #6d6d6d">单价：20/小时</div>
            </div>
          </div>
          <div class="heji">
            <div>合计：</div>
            <div style="color: #ff8259">￥45.00</div>
          </div>
        </div>
      </div>
    </div>

    <div v-if="orderinfo.diancan != null">
      <div class="tableorder">
        <div class="boxtitle">
          <div class="shuxian"></div>
          <div class="datetitle">点餐订单</div>
        </div>
        <div class="tableorder_con">
          <div class="diancanlist">
            <div class="diancanbox">
              <div class="diancanimg">
                <img src="../../assets/images/club2.jpg" alt="" />
              </div>
              <div class="diancaninfo">
                <div class="timeinfobox">
                  <div style="font-size: 18px">餐品1</div>
                  <div style="font-size: 16px; color: #6d6d6d">x1</div>
                </div>
                <div style="font-size: 16px; color: #6d6d6d">单价：20</div>
              </div>
            </div>
            <div class="diancanbox">
              <div class="diancanimg">
                <img src="../../assets/images/club2.jpg" alt="" />
              </div>
              <div class="diancaninfo">
                <div class="timeinfobox">
                  <div style="font-size: 18px">餐品1</div>
                  <div style="font-size: 16px; color: #6d6d6d">x1</div>
                </div>
                <div style="font-size: 16px; color: #6d6d6d">单价：20</div>
              </div>
            </div>
          </div>
          <div class="heji">
            <div>合计：</div>
            <div style="color: #ff8259">￥45.00</div>
          </div>
        </div>
      </div>
    </div>

    <div class="tableorder">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">价格明细</div>
      </div>
      <div class="tableorder_con">
        <div class="pricelist">
          <div class="price1">
            <div style="font-size: 18px">商品总价</div>
            <div
              style="font-size: 16px; color: #6d6d6d"
              v-if="payorder.length > 0"
            >
              {{ payorder[0].pay_money.toFixed(2) }}
            </div>
          </div>
          <div class="quanbox">
            <van-cell title="选择优惠券" is-link value="一张可用" />
          </div>
          <div class="price1">
            <div style="font-size: 18px">合计</div>
            <div
              style="font-size: 20px; color: #ff8259; font-weight: 600"
              v-if="payorder.length > 0"
            >
              ￥{{ payorder[0].pay_money.toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tableorder">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">支付方式</div>
      </div>
      <div class="paybox">
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell
              clickable
              @click="checked = '1'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="paycard"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">储值卡支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell
              clickable
              @click="checked = '2'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="weixinpay"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">微信支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
            <van-cell
              clickable
              @click="checked = '3'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="alipay"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">支付宝支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <div class="zhifubox">
      <div class="zhifuprice">
        <div style="font-size: 18px">合计:</div>
        <div style="font-size: 21px; color: #ff8259; font-weight: 600" v-if="payorder.length > 0">
          ￥{{ payorder[0].pay_money.toFixed(2) }}
        </div>
      </div>
      <van-button type="primary" class="zhifubtn" @click="payfor">
        支付
      </van-button>
    </div>
  </div>
</template>

<script>
import { zhifupaymoney } from "@/http/request.js";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      checked: "1",
      orderinfo: {},
      payorder: [],
    };
  },
  methods: {
    backlink() {
      this.$router.push("/homepage");
    },
    initData() {
      const store = useStore();
      const data = store.getNotPayOrder;
      this.orderinfo = data;
      if (data.table != null && data.table.length > 0) {
        for (var i = 0; i < data.table.length; i++) {
          data.table[i].playtime = this.getTimeDifference(
            data.table[i].open_time,
            data.table[i].close_time
          );
          const jsonString = data.table[i].storecover_image.replace(/'/g, '"');
          data.table[i].storecover_image = JSON.parse(jsonString);
          this.payorder.push(data.table[i]);
        }
      } else {
        this.$router.push("/homepage");
      }
    },
    // 将时间字符串转换为时间戳（以秒为单位）
    getTimeStamp(timeStr) {
      const [date, time] = timeStr.split(" ");
      const [year, month, day] = date.split("-");
      const [hour, minute, second] = time.split(":");
      return (
        new Date(year, month - 1, day, hour, minute, second).getTime() / 1000
      );
    },

    // 计算相差时间
    getTimeDifference(openTime, closeTime) {
      const openTimeStamp = this.getTimeStamp(openTime);
      const closeTimeStamp = this.getTimeStamp(closeTime);
      let timeDiff = closeTimeStamp - openTimeStamp;

      if (timeDiff < 0) {
        timeDiff += 24 * 60 * 60; // 加上一天的秒数
      }

      const hours = Math.floor(timeDiff / 3600);
      const minutes = Math.floor((timeDiff % 3600) / 60);
      const seconds = Math.floor(timeDiff % 60);

      return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
        2,
        "0"
      )}:${String(seconds).padStart(2, "0")}`;
    },
    payfor() {
      let order = { table: [] };
      zhifupaymoney({ id: this.payorder[0].id }).then((res) => {
        if (res.code == 0) {
          order.table.push(res.data[0]);
          const store = useStore();
          const notpayorder = store.getNotPayOrder;
          for (var i = 0; i < notpayorder.table.length; i++) {
            if (this.payorder[0].id == notpayorder.table[i].id) {
              notpayorder.table.splice(i, 1); // 从数组中删除指定位置的元素
              store.setNotPayOrder(notpayorder);
              break; // 找到后立即退出循环
            }
          }
          showToast(res.msg);
          this.$router.push({
            name: "PaySuccess",
            params: {
              orderinfo: JSON.stringify(order),
            },
          });
        }
      });
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #f2f3f5;
}
.tableorder {
  width: 90%;
  margin: 15px auto;
}
.boxtitle {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 5px;
  font-weight: 550;
}
.tableorder_con {
  width: 100%;
  background-color: white;
  box-sizing: border-box;
  border-radius: 10px;
  padding: 10px;
}
.tableorder-box {
  display: flex;
  justify-content: space-between;
}
.imgbox {
  width: 75px;
  height: 75px;
  overflow: hidden;
  border-radius: 5px;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infobox {
  flex-grow: 1;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.timeinfobox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.timeinfobox .time {
  margin-right: -10px;
  box-sizing: border-box;
  padding: 5px;
  font-size: 17px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #ebf2fc;
}
.heji {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
}
.zhujiaoimgbox {
  width: 75px;
  height: 75px;
  overflow: hidden;
  border-radius: 50%;
}
.zhujiaoimgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diancanlist {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.diancanbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 5px auto;
}
.diancanimg {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}
.diancanimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.diancaninfo {
  flex-grow: 1;
  margin-left: 5px;
  display: flex;
  height: 55px;
  flex-direction: column;
  justify-content: space-between;
}
.pricelist {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.price1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin: 5px auto;
}
.quanbox {
  width: 100%;
}
.quanbox .van-cell {
  padding: 0 !important;
  margin: 5px auto;
}
.payicon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.paybox {
  width: 100%;
}
.paybox .van-cell-group--inset {
  margin: 0 !important;
}
.zhifubox {
  width: 100%;
  height: 75px;
  background-color: white;
  margin-top: 20px;
  position: relative;
}
.zhifuprice {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
}
.zhifubtn {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 100px;
  height: 40px;
  border-radius: 25px;
}
</style>